<template>
  <el-dialog title="新增自动出票账号" :close-on-click-modal="false" @close="close" :visible.sync="visible">
    <el-form :model="form" :rules="rules" ref="form" size="mini">
        <el-row>
          <el-col :span = 12>
            <el-form-item label="航空公司" :label-width="formLabelWidth" prop="airline">
              <el-select v-model="form.airline"  filterable placeholder="请选择" clearable>
                <el-option v-for="item in airlineOptions" :key="item.key" :label="item.value" :value="item.key"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span = 12>
            <el-form-item label="航司登陆账号" :label-width="formLabelWidth" prop="b2bAccount">
              <el-input v-model="form.b2bAccount"/>
            </el-form-item>
          </el-col>
          <el-col :span = 12>
            <el-form-item label="航司登陆密码" :label-width="formLabelWidth" prop="b2bPwd">
              <el-input v-model="form.b2bPwd" type="password"/>
            </el-form-item>
          </el-col>
          <el-col :span = 12>
            <el-form-item label="对应office号" :label-width="formLabelWidth" prop="office">
              <el-input v-model="form.office"/>
            </el-form-item>
          </el-col>
          <el-col :span = 12>
            <el-form-item label="支付账号选择" :label-width="formLabelWidth" prop="b2b_pay_account_id">
              <el-select v-model="form.payAccountIdStr" multiple   clearable >
                <el-option v-for="item in b2bPayAccountOptions" :key="item.key" :label="item.value" :value="item.key"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span = 24>
            <el-form-item label="简要说明" :label-width="formLabelWidth" prop="remark">
              <el-input v-model="form.remark" type="textarea"/>
            </el-form-item>
          </el-col>

        </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <c-button type="primary" @click="btnOk">确 定</c-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'SDialogAdd',
  props: {
    data: {
      type: Object
    }
  },
  data () {
    return {
      formLabelWidth: '120px',
      visible: true,
      b2bPayAccountOptions: [],
      airlineOptions: [],
      form: {
        airline: '',
        b2bAccount: '',
        b2bPwd: '',
        office: '',
        remark: '',
        payAccountIdStr: ''
      },
      rules: {
        airline: {required: true, message: '请选择航空公司', trigger: 'blur'}
      }
    }
  },
  // 详情查看生命周期，约等于界面载入完成
  mounted () {
    this.getSelectData()
  },
  methods: {
    // 固定写法，每次加载都需要重置form
    close () {
      this.$emit('close')
    },
    btnOk (btn) {
      this.$refs['form'].validate((valid) => {
        // 校验通过
        if (valid) {
          this.$service.airB2bIssueAccount.addAirB2bIssueAccount(this.form).then(() => {
            this.visible = false
            this.$emit('ok')
          }).finally(() => {
            btn.isLoading(false)
          })
        } else {
          btn.isLoading(false)
        }
      })
    },
    getSelectData () {
      this.$service.options.getB2bPayAccount().then(res => {
        this.b2bPayAccountOptions = res.data
      })
      this.$service.options.getAirLineOption().then(res => {
        this.airlineOptions = res.data
      })
    }
  }
}
</script>

<style>

</style>
